import React, { Component } from 'react';
import { View, ScrollView, Alert } from 'react-native';
import { Scene } from 'react-native-router-flux';
import { observer } from 'mobx-react/native';
import CircleChart from './circle';
import Chart from './chart';
import List from './list';
import style from './style';
import home from '../models/home';
import navBarStyle from '../../../components/navBarStyle';
import NavBarIconBtn from '../../../components/NavBarIconBtn';

@observer
class MissionList extends Component {
  render() {
    return (
      <View style={{ flexGrow: 1 }}>
        <ScrollView>
          <View style={style.chartWrap}>
            <Chart data={this.props.store.kpi} date />
          </View>
          <List
            data={this.props.store.missions.tasks || []}
            store={this.props.store}
          />
        </ScrollView>
      </View>
    );
  }
}

export const ChangeRoleBtn = {
  renderRightButton: () => (
    <NavBarIconBtn
      onPress={() => {
        Alert.alert(
          '提示',
          '宏观数据功能为管理者提供移动端数据查询功能，目前正在开发中，敬请期待！',
          [{ text: '朕知道了' }]
        );
      }}
      name="refresh-ccw"
      title="宏观数据"
    />
  )
};
/* 
TODO 为appstore审核去掉宏观数据查看的功能
*/
module.exports = (
  <Scene
    key="home"
    component={MissionList}
    title="答橙计划"
    path="/home"
    {...navBarStyle}
    initial
    store={home}
    onEnter={() => home.init()}
  />
);
